<template>
  <div class="business-container">
    <el-row class="business-header">
      <el-card>
        <el-form label-width="auto" :model="form">
          <el-row type="flex" justify="space-between">
            <el-form-item label="订单编号">
              <el-col :span="8">
                <el-input
                  v-model="form.id"
                  class="inputStyle"
                  placeholder="请输入订单编号"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-col :span="8">
                <el-select
                  v-model="form.status"
                  placeholder="请选择"
                  class="inputStyle"
                >
                  <el-option
                    v-for="item in orderStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="付费状态">
              <el-col :span="8">
                <el-select
                  v-model="form.paymentStatus"
                  placeholder="请选择"
                  class="inputStyle"
                >
                  <el-option
                    label="未付"
                    value="1"
                  />
                  <el-option
                    label="已付"
                    value="2"
                  />
                </el-select>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-form-item label="发件人姓名">
              <el-col :span="8">
                <el-input
                  v-model="form.senderName"
                  class="inputStyle"
                  placeholder="请输入发件人姓名"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="发件人电话">
              <el-col :span="8">
                <el-input
                  v-model="form.senderPhone"
                  class="inputStyle"
                  placeholder="请输入发件人电话"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="发件人地址">
              <template>
                <el-row type="flex" :gutter="10">
                  <el-col :span="8">
                    <el-select
                      v-model="form.senderProvinceId"
                      placeholder="请选择"
                      class="selectStyle"
                      @change="getSenderCity"
                    >
                      <el-option
                        v-for="item in senderAreas.province"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="form.senderCityId"
                      placeholder="请选择"
                      class="selectStyle"
                      @change="getSenderCounty"
                    >
                      <el-option
                        v-for="item in senderAreas.city"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="form.senderCountyId"
                      placeholder="请选择"
                      class="selectStyle"
                    >
                      <el-option
                        v-for="item in senderAreas.county"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                </el-row>
              </template>
            </el-form-item>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-form-item label="收件人姓名">
              <el-col :span="8">
                <el-input
                  v-model="form.receiverName"
                  class="inputStyle"
                  placeholder="请输入收件人姓名"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="收件人电话">
              <el-col :span="8">
                <el-input
                  v-model="form.receiverPhone"
                  class="inputStyle"
                  placeholder="请输入收件人电话"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="收件人地址">
              <template>
                <el-row type="flex" :gutter="10">
                  <el-col :span="8">
                    <el-select
                      v-model="form.receiverProvinceId"
                      placeholder="请选择"
                      class="selectStyle"
                      @change="getReceiverCity"
                    >
                      <el-option
                        v-for="item in receiverAreas.province"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="form.receiverCityId"
                      placeholder="请选择"
                      class="selectStyle"
                      @change="getReceiverCounty"
                    >
                      <el-option
                        v-for="item in receiverAreas.city"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="form.receiverCountyId"
                      placeholder="请选择"
                      class="selectStyle"
                    >
                      <el-option
                        v-for="item in receiverAreas.county"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                </el-row>
              </template>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="margin: 0">
              <el-button
                class="buttonStyle"
                type="primary"
                size="small"
                @click="searchClick"
              >查询</el-button>
              <el-button
                class="buttonStyle"
                size="small"
                @click="resetClick"
              >重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
    </el-row>
    <el-row class="business-footer">
      <el-card class="footer-card">
        <el-row>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column align="center" prop="date" label="序号" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="id"
              label="订单编号"
              width="158"
            />
            <el-table-column
              align="center"
              prop="transportOrder.id"
              label="运单编号"
              width="158"
            />
            <el-table-column
              align="center"
              prop="createTime"
              label="下单时间"
              width="158"
            />
            <el-table-column
              align="center"
              prop="status"
              label="订单状态"
              width="158"
            />
            <el-table-column
              align="center"
              prop="senderName"
              label="发件人姓名"
              width="158"
            />
            <el-table-column
              align="center"
              prop="senderPhone"
              label="发件人电话"
              width="158"
            />
            <el-table-column
              align="center"
              prop="receiverAddress"
              label="发件人地址"
              width="158"
            />
            <el-table-column
              align="center"
              prop="receiverName"
              label="收件人姓名"
              width="158"
            />
            <el-table-column
              align="center"
              prop="receiverPhone"
              label="收件人电话"
              width="158"
            />
            <el-table-column
              align="center"
              prop="senderAddress"
              label="收件人地址"
              width="158"
            />
            <el-table-column
              align="center"
              prop="pickupType"
              label="取件类型"
              width="158"
            >
              <template #default="{ row }">
                <span>{{
                  row.pickupType === 1 ? "网点自寄" : "上门取件"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="paymentMethod"
              label="付费类型"
              width="158"
            >
              <template #default="{ row }">
                <span>{{ row.paymentMethod === 1 ? "预结" : "到付" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="paymentStatus"
              label="付费状态"
              width="158"
            >
              <template #default="{ row }">
                <span>{{ row.paymentStatus === 1 ? "未付" : "已付" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="操作"
              fixed="right"
            >
              <template>
                <el-button type="text" size="small">查看详情</el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty :image-size="150" description="暂无数据" />
            </template>
          </el-table>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          style="margin-top: 10px; height: 40px"
          align="middle"
        >
          <el-pagination
            :current-page="form.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-count="pages"
            :page-size="form.pageSize"
            :pager-count="7"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="gurrentChange"
          />
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getAreaAPI, getOrderAPI } from '@/api/business'
import { orderStatus } from '@/canstant/business'
export default {
  data() {
    return {
      orderStatus,
      // 表单数据
      form: {
        amount: '',
        createTime: '',
        estimatedArrivalTime: '',
        id: '',
        memberId: '',
        orderType: '',
        page: 1,
        pageSize: 10,
        paymentMethod: '',
        paymentStatus: '',
        pickupType: '',
        receiverAddress: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        senderAddress: '',
        senderCityId: '',
        senderCountyId: '',
        senderName: '',
        senderPhone: '',
        senderProvinceId: '',
        status: ''
      },
      // 表格数据
      tableData: [],
      // 收件人省市区
      receiverAreas: {
        province: [],
        city: [],
        county: []
      },
      // 发件人省市区
      senderAreas: {
        province: [],
        city: [],
        county: []
      },
      // 总页数
      total: 0,
      // 总页数
      pages: 1,
      // 防抖
      timer: null
    }
  },
  created() {
    this.tableListData()
    this.areasData()
  },
  methods: {
    // 表格数据
    async tableListData() {
      const { data } = await getOrderAPI(this.form)
      const itemData = data.data
      this.tableData = itemData.items
      this.total = +itemData.counts
      this.pages = +itemData.pages
    },
    // 行政区域
    async areasData() {
      const { data } = await getAreaAPI()
      this.receiverAreas.province = data.data
      this.senderAreas.province = data.data
    },
    async getReceiverCity() {
      const { data } = await getAreaAPI(this.form.receiverProvinceId)
      this.receiverAreas.city = data.data
      this.form.receiverCityId = null
      this.form.receiverCountyId = null
      this.receiverAreas.county = []
    },
    async getReceiverCounty() {
      const { data } = await getAreaAPI(this.form.receiverCityId)
      this.receiverAreas.county = data.data
      this.form.receiverCountyId = null
    },
    async getSenderCity() {
      const { data } = await getAreaAPI(this.form.senderProvinceId)
      this.senderAreas.city = data.data
      this.form.senderCityId = null
      this.form.senderCountyId = null
      this.senderAreas.county = []
    },
    async getSenderCounty() {
      const { data } = await getAreaAPI(this.form.senderCityId)
      this.senderAreas.county = data.data
      this.form.senderCountyId = null
    },
    // 省市区
    // async areasChange(type, id, key) {
    //   if (key === 'province' && type === 'senderAreas') {
    //     this.form['senderCity'] = null
    //     this.form['senderCounty'] = null
    //   }
    //   if (key === 'city' && type === 'senderAreas') {
    //     this.form['senderCounty'] = null
    //   }
    //   if (type === 'senderAreas') {
    //     const { data } = await getAreaAPI(id)
    //     this.senderAreas[key] = data.data
    //     return
    //   }
    //   if (key === 'province' && type === 'receiverAreas') {
    //     this.form['receiverCity'] = null
    //     this.form['receiverCounty'] = null
    //   }
    //   if (key === 'city' && type === 'receiverAreas') {
    //     this.form['receiverCounty'] = null
    //   }
    //   if (type === 'receiverAreas') {
    //     const { data } = await getAreaAPI(id)
    //     this.receiverAreas[key] = data.data
    //     return
    //   }
    // },
    // 搜索
    searchClick() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.tableListData()
      }, 500)
    },
    // 重置
    resetClick() {
      this.form.receiverCityId = null
      this.form.receiverCountyId = null
      this.form.receiverName = null
      this.form.receiverPhone = null
      this.form.receiverProvinceId = null
      this.form.senderAddress = null
      this.form.senderCityId = null
      this.form.senderCountyId = null
      this.form.senderName = null
      this.form.senderPhone = null
      this.form.senderProvinceId = null
      this.form.id = null
      this.form.status = null
      this.form.paymentStatus = null
      this.receiverAreas = {
        province: [],
        city: [],
        county: []
      }
      this.senderAreas = {
        province: [],
        city: [],
        county: []
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.tableListData()
        this.areasData()
      }, 500)
    },
    // 当前页数
    sizeChange(pageSize) {
      this.form.pageSize = pageSize
      this.tableListData()
    },
    // 当前页改变
    gurrentChange(page) {
      this.form.page = page
      this.tableListData()
    }
  }
}
</script>

<style scoped lang="scss">
.business-container {
  padding: 0 20px;

  .business-header {
    font-size: 13px;
    margin-bottom: 20px;
    .el-form-item {
      padding: 0 20px;
      .inputStyle {
        width: 290px;
      }
      .buttonStyle {
        width: 80px;
        height: 30px;

        &.buttonStyle:first-child {
          background-color: #189450;
          border-color: #189450;
          margin-right: 10px;

          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
    .header-footer {
      margin: 0;
    }

    .selectStyle {
      width: 90px;
    }
  }
  .business-footer {
    .footer-card {
      padding: 10px;
      padding-bottom: 0;
    }
  }
}
::v-deep .el-form-item__label {
  font-size: 13px;
}

::v-deep .el-table thead tr th {
  font-size: 13px;
  font-weight: bold;
  background: #f8faff !important;
  border: none;
}
::v-deep .el-table tbody tr td {
  font-size: 13px;
  color: #606266;
  border: none;
}
::v-deep .el-input__inner {
  height: 35px;
  font-size: 13px;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  height: 28px;
  font-size: 13px;
}
</style>
